<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="layui-v2.8.2/dist/css/layui.css"/>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-table" id="table" lay-filter="table"></table>
    </div>
</div>

<!-- 依 赖 脚 本 -->
<script src="layui-v2.8.2/dist/layui.js"></script>
<script src="js/common.js"></script>
<script>
    layui.use(['layuiFastTable'], function () {
        let layuiFastTable = layui.layuiFastTable;
        let layuiFastHelper = layui.layuiFastHelper;

        layuiFastTable.api.init({
            urls: {
                index: 'data/index.json', // 数据列表URL
                add: 'add.html', // 添加按钮URL
                detail: 'detail.html', // 详情按钮URL
                edit: 'edit.html', // 编辑按钮URL
                del: 'data/post.json', // 删除按钮URL
                multi: 'data/post.json', // 批量操作按钮URL
                send: 'data/post.json', // 发货按钮URL
            },
            toolbar: [// 自定义工具栏按钮
                {
                    text: '状态批量操作',
                    layEvent: 'more',
                    icon: 'layui-icon-down',
                    class: 'layui-btn-primary btn-more',
                    child: [
                        {
                            title: '显示',
                            icon: 'layui-icon-eye',
                            layEvent: 'multi',  // 批量操作事件
                            params: 'status=1', // 操作额外参数
                            class: 'layui-btn-primary',
                            // url: '', // 重写multi请求的URL
                        },
                        {
                            title: '隐藏',
                            icon: 'layui-icon-eye-invisible',
                            layEvent: 'multi', // 批量操作事件
                            params: 'status=0', // 操作额外参数
                            class: 'layui-btn-primary',
                        },
                    ],
                },
                {
                    text: '', // 显示文字
                    title: '自定义按钮', // 提示文字
                    icon: 'layui-icon-help', // 图标
                    layEvent: 'dialog', // 弹窗事件
                    class: 'layui-btn-primary', // class
                    url: '/export' // URL
                },
                {
                    text: '', // 显示文字
                    title: '自定义按钮', // 提示文字
                    icon: 'layui-icon-release', // 图标
                    layEvent: 'send', // 弹窗事件
                    class: 'layui-btn-primary', // class
                    url: '/export' // URL
                },
            ],
            toolbarEvents: {
                send: function (obj) {
                    var data = {};
                    data[obj.config.pk] = layuiFastTable.api.getCheckField(obj, obj.config.pk);
                    if (data[obj.config.pk] === '') {
                        layuiFastHelper.msg('请选择操作的列', true);
                        return;
                    }
                    layuiFastHelper.confirm('确定要批量发货？', function () {
                        layuiFastHelper.http('POST', obj.config.urls.send, data).then(function (res) {
                            layuiFastTable.api.refresh(obj.config.id)
                        });
                    })
                }
            },
        });
        // 操作当前实例
        var thisTable = layuiFastTable.api.render({
            elem: '#table', // 表格ID
            title: '工资条', // 导出文件名
            size: 'sm', // 表格大小
            url: layuiFastTable.defaults.urls.index, // 数据列表URL
            pk: 'id', // 列表主键,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: "id", title: "ID", width: "50", ops: "BETWEEN", sort: true}, // 生成范围搜索框
                    {field: "fxgs", title: "发薪公司", width: "130", ops: "DIALOG", searchData: {url: './', title: '请选择'}}, // 生成弹窗搜索框
                    {
                        field: "bm", title: "部门", width: "100", ops: "=",// 生成模糊搜索框
                        searchData: {'1': 'A部门', '2': 'B部门', '3': 'C部门'},
                        templet: layuiFastTable.api.templet.badge
                    },
                    {
                        field: "gw", title: "岗位", width: "150", ops: false,  // 隐藏搜索框
                    },
                    // {title: '电话', field: 'phone', width: 120, ops: 'IN'}, // 生成文本搜索框
                    {
                        field: "yf", title: "月份", width: "90", ops: "RANGE",
                        extend: 'lay-options=\'{type: "month", shortcuts: false}\'' // 生成月范围搜索框
                    },
                    {
                        field: 'createTime', title: '创建时间', width: 170, ops: 'RANGE',  // 生成日期时间范围搜索框
                        templet: layuiFastTable.api.templet.datetime
                    },
                    {field: "xm", title: "姓名", width: "100", ops: "LIKE"},
                    {
                        title: '状态', field: 'status', width: 80, ops: "IN", // 生成多选搜索框，需要加载多选框插件
                        searchData: {'1': '成功', '2': '失败', '0': '未知'},
                        templet: layuiFastTable.api.templet.status
                    },
                    {field: "jbgz", title: "基本工资", width: "100", sort: true, ops: "BETWEEN"},
                    {field: "gwgz", title: "岗位工资", width: "100", ops: false},
                    {field: "zwjt", title: "职务津贴", width: "100", ops: false},
                    {field: "jxgzjs", title: "绩效工资基数", width: "100", ops: false},
                    {field: "jxxs", title: "绩效系数", width: "100", ops: false},
                    {field: "jxgz", title: "绩效工资", width: "100", ops: false},
                    {field: "jt", title: "津贴", width: "100", ops: false},
                    {field: "zhbt", title: "综合补贴", width: "100", ops: false},
                    {field: "qqj", title: "全勤奖", width: "100", ops: false},
                    {field: "qqkk", title: "缺勤扣款", width: "100", ops: false},
                    {field: "slbt", title: "司龄补贴", width: "100", ops: false},
                    {field: "zbf", title: "值班费", width: "100", ops: false},
                    {field: "sqbk", title: "税前补款", width: "100", ops: false},
                    {field: "sqkk", title: "税前扣款", width: "100", ops: false},
                    {field: "ywtc", title: "业务提成", width: "100", ops: false},
                    {field: "yfhj", title: "应发合计", width: "100", ops: false},
                    {field: "grsb", title: "个人社保", width: "100", ops: false},
                    {field: "grgjj", title: "个人公积金", width: "100", ops: false},
                    {field: "zxfjkc", title: "专项附加扣除", width: "100", ops: false},
                    {field: "gs", title: "个税", width: "100", ops: false},
                    {field: "sfgz", title: "实发工资", width: "100", ops: false},
                    {field: "djsb", title: "代缴社保", width: "100", ops: false},
                    {field: "djgjj", title: "代缴公积金", width: "100", ops: false},
                    {field: "sdrqf", title: "水电燃气费", width: "100", ops: false},
                    {field: "zsf", title: "住宿费", width: "100", ops: false},
                    {field: "shbk", title: "税后补款", width: "100", ops: false},
                    {field: "shkk", title: "税后扣款", width: "100", ops: false},
                    {field: "qqts", title: "缺勤天数", width: "100", ops: false},
                    {field: "bjts", title: "病假天数", width: "100", ops: false},
                    {field: "cjts", title: "产假天数", width: "100", ops: false},
                    {field: "cdztfzs", title: "迟到早退分钟数", width: "100", ops: false},
                    {
                        title: '操作', minWidth: 110, fixed: 'right',
                        buttons: [
                            {
                                name: 'button1',
                                title: '自定义按钮1',
                                icon: 'layui-icon-help',
                                class: 'layui-btn-primary',
                                layEvent: 'dialog', // 弹窗事件
                                url: '/dialog'
                            },
                            {
                                name: 'send',
                                title: '发货',
                                icon: 'layui-icon-release',
                                class: 'layui-btn-primary',
                                layEvent: 'send', // 自定义事件
                                url: '/send'
                            },
                        ],
                        buttonEvents: {
                            send: function (obj) {
                                layuiFastHelper.confirm('确定要发货？', function () {
                                    var data = {};
                                    data[obj.config.pk] = obj.data[obj.config.pk];
                                    layuiFastHelper.http('POST', obj.config.urls.send, data).then(function (res) {
                                        layuiFastTable.api.refresh(obj.config.id)
                                    });
                                })
                            }
                        },
                        buttonHandle: function (button, row, obj) {
                            if (row.status == 1 && button.name == 'send') {
                                return false; // 返回false表示隐藏操作按钮
                            }
                        },
                        templet: function (row) { // 操作列
                            return layuiFastTable.api.templet.operate.call(this, row, thisTable)
                        }
                    }
                ]
            ]
        });
    })
</script>
</body>
</html>
